<template>
	<view class="u-page">
		<view class="content">
			<view class="projectList" v-if="lists.length > 0">
				<block v-for="(item, index) in lists" :key="item.id">
					<view class="lists" @click="goPage('/pages/user/userProject?id='+item.pid)">
						<view class="images"><image :src="item.slProjectByPid.pic" mode=""></image></view>
						<view class="list_contnet">
							<view class="projecttitle">{{item.slProjectByPid.title}}</view>
							<view class="projectinfo"> {{item.slProjectByPid.contentInfo}}</view>
							<view class="tags">
								<block v-for="(tag,index1) in item.slProjectByPid.tag" :key='index1'>
									<uni-tag class="tag" :text="tag" type="primary" circle="true"></uni-tag>
								</block>
							</view>
						</view>
						
					</view>
				</block>
			</view>
			<view class="nodData" v-else>
				<view class="zanwu">你还没有参与项目</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData:{},
				lists: [],
			}
		},
		onLoad() {
			let user = uni.getStorageSync('userData');
			this.userData = user;
			this.project();
		},
		methods: {
			goPage(url){
				console.log('11111')
				uni.navigateTo({
					url:url
				})
			},
			async project(){
				const investment = await this.GQL({
						"operationName": "allSlProjectContracts",
						"query": "query allSlProjectContracts($filter: SlProjectContractFilter) { allSlProjectContracts(filter:$filter) { nodes { uid pid id createtime contractFile slProjectByPid { pic title tag contentInfo } } } }",
						"variables": {"filter": {"status": {"equalTo": "1"},"uid":{"equalTo":this.userData.uid}}}
				})
				if(investment.data.allSlProjectContracts.nodes !=''){
					investment.data.allSlProjectContracts.nodes.forEach(function (item, index) {
						if(item.slProjectByPid.tag){
							item.slProjectByPid.tag = item.slProjectByPid.tag.split(',')
						}
					});
					this.lists = investment.data.allSlProjectContracts.nodes
				}
			}
		}
	}
</script>

<style lang="scss">
.u-page{
		background-color: #FBFCFE;
	}
	.nodData {
		height: 60vh;
		// font-weight: 600;
		background-color: #FFFFFF;
		color: #aaaaaa;
		border-radius: 5px;
		box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.content{
	
		margin: 15px;
		.projectList{
			.zanwu{
				text-align: center;
				font-size: 11px;
				font-weight: 400;
				color: #9BA7C1;
				line-height: 15px;
			}
			background-color: #FFFFFF;
			border-radius: 5px;
			.lists{
				padding-top:10px ;
				margin: 0px 10px;
				display: flex;
				
				.list_contnet{
					margin-left: 5px;
					.projecttitle{
						width: 100%;
						height: 16px;
						overflow: hidden;
						font-size: 15px;
						font-weight: 400;
						color: #161E3E;
						line-height: 16px;
					}
					.projectinfo{
						margin: 10px 0px;
						font-size: 11px;
						font-weight: 400;
						color: #9BA7C1;
						line-height: 15px;
					}
					.tags{
						font-size: 11px;
						.tag{
							margin-right: 5px;
						}
					}
				}
			}
			image{
				border-radius: 6px;
				width: 90px;
				height: 90px;
			}
		}	
	}
	
</style>
